<template>
<!-- mode设置横向还是纵向(默认) -->
<el-menu mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">首页</el-menu-item>
  <el-menu-item index="2">免费课</el-menu-item>
  <el-menu-item index="3">直播课</el-menu-item>
  <el-menu-item index="4">精品课</el-menu-item>
  <el-menu-item index="5">线上班</el-menu-item>
  <el-menu-item index="6">脱产班</el-menu-item>
  <el-sub-menu index="7">
    <template #title>关于我们</template>
    <el-menu-item index="7-1">联系我们</el-menu-item>
    <el-menu-item index="7-2">求职招聘</el-menu-item>
    <el-menu-item index="7-3">公司地址</el-menu-item>
  </el-sub-menu>
</el-menu>

  <h3>侧栏</h3>
  <div style="width: 200px">
    <el-menu text-color="#fff" background-color="#0aa1ed" active-text-color="#f00">
      <el-sub-menu index="1">
        <template #title>魏国</template>
        <el-menu-item index="1-1">曹操</el-menu-item>
        <el-menu-item index="1-2">司马懿</el-menu-item>
        <el-menu-item index="1-3">曹植</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="2">
        <template #title>蜀国</template>
        <el-menu-item index="2-1">刘备</el-menu-item>
        <el-menu-item index="2-2">关羽</el-menu-item>
        <el-menu-item index="2-3">张飞</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>


</template>

<script setup>
const handleSelect = (index,indexPath)=>{
  console.log("index="+index+" indexPath="+indexPath);
}
</script>

<style scoped>

</style>